<!--
 * @Author: Lw
 * @Date: 2022-09-01 10:19:01
 * @LastEditors: Lw
 * @LastEditTime: 2022-10-12 17:36:47
-->
<template>
  <n-space vertical :size="24">
    <!-- 条件筛选 -->
    <n-card>
      <SearchBox
        :options="config.searchOptions"
        :form="searchForm"
        @search="search"
        @reset="reset"
        v-slot="{ key, value }"
      >
      </SearchBox>
    </n-card>
    <!-- 表格数据 -->
    <n-card>
      <Table
        :config="config"
        :data="data"
        :loading="loading"
        @checked="handleChecked"
        @click="handleClick"
        @pageChange="({ page, pageSize }) => search(page, pageSize)"
      />
    </n-card>
  </n-space>
  <!-- 表单弹窗 -->
  <FormDialog
    v-model:show="dialogShow"
    :title="dialogTitle"
    :options="config.formOptions"
    :rules="config.rules"
    :form="form"
    :onlyRead="onlyRead"
    :loading="formLoading"
    @ok="handleSave"
    v-slot="{ key, value }"
  >
    <!-- 根据KEY值，生成自定义表单插槽 -->
    <div v-if="key === 'custom'">
      <!-- 查看 -->
      <div v-if="onlyRead"> 该自定义项的数值等于{{ value }} </div>
      <!-- 编辑 -->
      <n-timeline v-else>
        <n-timeline-item content="啊" />
        <n-timeline-item type="success" title="成功" content="哪里成功" time="2018-04-03 20:46" />
        <n-timeline-item type="error" content="哪里错误" time="2018-04-03 20:46" />
        <n-timeline-item type="warning" title="警告" content="哪里警告" time="2018-04-03 20:46" />
        <n-timeline-item type="info" title="信息" content="是的" time="2018-04-03 20:46" line-type="dashed" />
        <n-timeline-item content="啊" />
      </n-timeline>
    </div>
  </FormDialog>
</template>

<script setup>
  import Table from '@/components/Table/index.vue'
  import SearchBox from '@/components/SearchBox/index.vue'
  import FormDialog from '@/components/Dialog/form.vue'
  import configDate from './config'
  const loading = ref(false)
  const formLoading = ref(false)
  const config = reactive({ ...configDate })
  const data = ref([])
  const searchResetData = {}
  configDate.searchOptions.forEach((item) => {
    const { key, type } = item
    searchResetData[key] = type === 'text' ? '' : null
  })
  const searchForm = ref({})
  const dialogShow = ref(false)
  const dialogTitle = ref('')
  const onlyRead = ref(false)
  const formResetData = {}
  configDate.formOptions.forEach((item) => {
    const { key, type } = item
    formResetData[key] = type === 'text' ? '' : null
  })
  const form = ref({})
  /** 按钮点击 */
  const handleClick = ({ key, data }) => {
    console.log(key, data)
    switch (key) {
      case 'add':
        form.value = { ...formResetData }
        dialogShow.value = true
        dialogTitle.value = '新增'
        onlyRead.value = false
        break
      case 'edit':
        form.value = data
        dialogShow.value = true
        dialogTitle.value = '编辑'
        onlyRead.value = false
        break
      case 'info':
        form.value = data
        dialogShow.value = true
        dialogTitle.value = '详情'
        onlyRead.value = true
        break
      case 'del':
        setTimeout(() => {
          $message.success('删除成功')
          search()
        }, 1000)
        break
      case 'delBatch':
        setTimeout(() => {
          $message.success('删除成功')
          search()
        }, 1000)
        break
    }
  }
  const handleChecked = (data) => {
    console.log(data)
  }
  const handleSave = () => {
    formLoading.value = true
    const res = toRaw(form.value)
    setTimeout(() => {
      $message.success(JSON.stringify(res))
      search()
      dialogShow.value = false
      formLoading.value = false
    }, 1000)
  }
  const search = (page = 1, pageSize = config.pageSize) => {
    // 不传参数就默认刷新到第一页，每页条数就默认引用当前存储的pageSize
    const params = {
      page,
      pageSize,
      ...searchForm.value,
    }
    console.log('表格查询参数>>>', params)
    loading.value = true
    // 接口数据获取
    setTimeout((params) => {
      // 保存变更后的页面配置(用于一些类似编辑后只需要刷新当前页数据的特殊场景)
      config.page = page
      config.pageSize = pageSize
      // 更新数据总量
      config.total = 100
      data.value = Array.from({ length: 10 }).map((_, index) => ({
        id: index,
        name: `Edward King ${index}`,
        code: index,
        time: '2022-09-01',
        address: `London, Park Lane no. ${index}`,
        custom: index,
      }))

      loading.value = false
    }, 1000)
  }
  const reset = () => {
    searchForm.value = { ...searchResetData }
    search()
  }
  onMounted(() => {
    search()
  })
</script>

<style lang="scss" scoped></style>
